<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="100px"
      class="demo-ruleForm"
      label-position="left"
    >
      <el-form-item label="模块：" prop="model">
        <el-select v-model="form.model" placeholder="请选择模块" @change="changeModel" style="width:100%">
          <el-option
            v-for="(item, index) in modelList"
            :key="index"
            :label="item"
            :value="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动ID：" prop="task_id">
        <el-select v-model="form.task_id" placeholder="请选择活动ID" style="width:100%">
          <el-option
            v-for="(item, index) in activeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="场次:" v-if="is_round" prop="round_id">
        <el-select
          v-model="form.round_id"
          placeholder="请选择场次"
          style="width: 100%"
        >
          <el-option
            v-for="item in modelList"
            :key="item.id"
            :label="item.level"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="链接："
        prop="url"
      >
        <el-input
          v-model="form.url"
          placeholder="请输入链接"
        />
      </el-form-item>
      <el-form-item label="图片" prop="photo">
        <el-input
          v-model="form.photo"
          readonly
          placeholder="请上传图片"
          style="width:calc(100% - 70px)"
        />
        <div class="commhover inputbox ml_10">
          上传图片
          <input
            type="file"
            name=""
            class="uploadinput commhover"
            id="uploadimg"
            accept="image/*"
            @change="changeImg"
          />
        </div>
      </el-form-item>
      <el-form-item v-if="imgsrc">
        <img :src="imgsrc" alt="" class="imgurl" />
      </el-form-item>
      <el-form-item label="时间范围：" prop="time">
        <el-date-picker
          v-model="form.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width:100%"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="form.msg" type="textarea" rows="3" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="flexend">
      <el-button>取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { getModuleType } from '@/api/sethome'
import { uploadPhoto } from "@/api/comm";
import { isOverSize } from "@/utils/validate";
export default {
  data() {
    return {
      modelList: {},
      activeList:[],
      form: {
        module_id:'',
        task_id:'',
        photo: '',
        url:'',
        time:'',
        text:'',
        level:'',
        status:1,
        msg:'',
        round_id:''
      },
      imgsrc:'',
      rules: {
        model:[{ required: true, message: '请选择模块', trigger: 'change' }],
        id:[{ required: true, message: '活动id不能为空', trigger: 'blur' }],
        link:[{ required: true, message: '链接不能为空', trigger: 'blur' }],
        url:[{ required: true, message: '图片不能为空', trigger: 'blur' }],
        time:[{ required: true, message: '时间范围不能为空', trigger: 'blur' }],
        status:[{ required: true, message: '请选择状态', trigger: 'change' }],
      },
    };
  },

  created(){
    this.getModuleType()
  },

  methods: {

    getModuleType(){
      getModuleType().then(res=>{
        this.modelList = res.data
      })
    },

    changeModel(val){
      taskList({type:val}).then(res=>{
        this.activeList = res.data
      })
    },

    addPlus(type) {
      if (type == 1) {
        this.form.urls.push({ value: "" });
      }else if(type == 2){
        this.form.pics.push({value:''})
      }
    },

    deletePlus(index, type) {
      if (type == 1) {
        this.form.urls.splice(index, 1);
      }else if(type == 2){
        this.form.pics.splice(index, 1)
      }
    },

    // 上传图片
    changeImg(event) {
      var file = event.currentTarget.files[0];
      console.log("file:", file, event);
      if (isOverSize(file.size, 5)) {
        this.$message.warning("图片大小不能超过5MB");
        return;
      }
      var formData = new FormData();
      formData.append("file", file);
      formData.append("type", 'bg');
      uploadPhoto(formData).then((res) => {
        if (res.code == 1) {
          // console.log('图片：',res.data);
          this.$message.success("上传成功");
          this.imgsrc = process.env.VUE_APP_BASE_API + "/" + res.data;
          this.form.url = res.data;
          document.getElementById("uploadimg").value = null;
        }
      });
    },

    onSubmit(){
      this.$refs.form.validate(valid=>{
        if(!valid) return

      })
    } 
  },
};
</script>
<style lang="scss" scoped>
.inputbox {
  display: inline-block;
  width: 60px;
  background-color: #4A73FF;
  border: 1px solid #4A73FF;
  color: #fff;
  height: 32px;
  border-radius: 4px;
  line-height: 32px;
  font-size: 12px;
  text-align: center;
  position: relative;
}
.uploadinput {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
}

.imgurl {
  width: 120px;
  height: 200px;
}
</style>